<template>
    <div class="container">
        <module-title title="剧组发展预警" :noBg="true"></module-title>
        <div class="flex" style="padding:18px 30px 0 30px">
            <jz-info :imgStyle="{'height': '76px'}" :valueStyle="{'fontSize': '30px'}" :icon="require('../../assets/icon-tv.png')" :label="'今年累计接待剧组人数与去年同期比'" unit="%" :data="data.value1"></jz-info>
            <jz-info :imgStyle="{'height': '76px'}"  :valueStyle="{'fontSize': '30px'}" :icon="require('../../assets/icon-money2.png')" :label="'今年累计接待剧组数与去年同期比'" unit="%" :data="data.value2"></jz-info>
        </div>
        <div ref="dialogChart2" style="height:200px;margin-top:54px"></div>
    </div>
</template>
<script>
import JzInfo from '../JzInfo.vue'
import ModuleTitle from '../ModuleTitle.vue'
import RText from '../RText.vue'
import * as echarts from 'echarts';
export default {
    components: { ModuleTitle, JzInfo, RText },
    props: {
        data: Object
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        data: {
            handler() {
                this.$nextTick(() => {
                    this.showChart(this.chart, 'dialogChart2', this.getOption())
                })
            },
            immediate: false,
            deep: true
        }
    },
    methods: {
        update() {
            this.showChart(this.chart, 'dialogChart2', this.getOption())
        },
        showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            }
            this.$refs[id].setAttribute('_echarts_instance_','')
            instance.setOption(option,true);
            this.$forceUpdate();
        },
        getOption() {
            let serie = {
                type: 'line',
            }
            return {
                grid: {
                    bottom: 42,
                    top: 40,
                    left: 58,
                    right: 30
                },
                // tooltip: this.getTooltipItem(),
                colors: ['#0884FF', '#64E6E2', '#FFA00A'],
                legend: {
                    textStyle: {
                        color: '#FFF',
                        fontSize: 14
                    },
                    // right: 24,

                    right: 30
                },
                xAxis: {
                    data: this.data.list.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},

                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },
                   
                    axisLine: {
                        lineStyle: {
                            color: '#36525E',
                        }
                    },
                    nameGap: 10
                },
                yAxis:[{
                    name: '剧组数:个',
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 14,
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {color: '#36525E',}
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#36525E',
                        }
                    },
                }],
                 series:[{
                    name: this.data.legend[0],
                    data: this.data.list.map(e => e.value1),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(8,132,255,1)'},
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(8,132,255,0.0)'
                            }, {
                                offset: 0.8, color: 'rgba(8,132,255,0.3)'
                            }, {
                                offset: 1, color: 'rgba(8,132,255,0.4)'
                            }]
                        }
                    },
                    ...serie
                },{
                    name: this.data.legend[1],
                    data: this.data.list.map(e => e.value2),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(100,230,226,1)'},
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(100,230,226,0)'
                            }, {
                                offset: 0.8, color: 'rgba(100,230,226,0.3)'
                            },{
                                offset: 1, color: 'rgba(100,230,226,0.4)'
                            }]
                        }
                    },
                    ...serie
                },{
                    name: this.data.legend[2],
                    data: this.data.list.map(e => e.value3),
                    yAxisIndex: 0,
                    lineStyle: {color: 'rgba(255,160,10,1)'},
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(255,160,10,0)'
                            }, {
                                offset: 0.2, color: 'rgba(255,160,10,0.3)'
                            }, {
                                offset: 1, color: 'rgba(255,160,10,0.4)'
                            }]
                        }
                    },
                    ...serie
                }]
                
            }
        }
    },
     
}
</script>
<style lang="less" scoped>
.container {
    background: linear-gradient(360deg, rgba(8, 132, 255, 0) 0%, rgba(8, 132, 255, 0.12) 100%);
}
.flex {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>